<template>
  <div class="pk-grid" :class="[{'pk-grid-card': card}]">
    <div class="pk-grid-item" :class="[{'pk-grid-item3': col==3}]" v-for="(item,index) in config" :key="index">
      <div class="pk-grid-icon"></div>
      <div class="pk-grid-text">
        {{item.title}}
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';
defineProps({
  config: {
    type: Array,
    default: () => []
  },
  col:{
    type: [String , Number],
    default: 3
  },
  card:{
    type: Boolean,
    default: true
  }
})
</script>

<style lang="scss" scoped>
.pk-grid{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  &-card{
    background: #fff;
    padding: 24rpx;
    border-radius: $uni-border-radius-base;
    box-shadow: 0px 8rpx 32px 0px rgba(0,0,0,0.06); 
  }
  &-item{
    width: 25%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  &-icon{
    width: 80rpx;
    height: 80rpx;
    background: #000;
    border-radius: 80rpx;
  }
  &-text{
    color: $uni-text-color-grey;
    padding: 8rpx 0;
    overflow: hidden;
    white-space: nowrap; 
    font-size: $uni-font-size-base;
    word-break: break-all;
    width: 100%;
    text-align: center;
  }
  &-item3{
    width: 33.333%!important;
    overflow: hidden;
  }
}
</style>